<template>
  <div>
    <div class="flexBetween">
      <div class="left">
        <a-tree
          :tree-data="treeData"
          :default-expanded-keys="['0-0-0', '0-0-1','0-1-0', '0-2-0']"
          :default-selected-keys="['0-0-0', '0-0-1']"
          :default-checked-keys="['0-0-0', '0-0-1']"
          @select="onSelect"
        >
          <template slot="custom" slot-scope="item">
            <div :class="{treeView:item.key==selectKey||item.title=='结构队'}">
              <span class="tree-view-left">{{ item.title }}</span>
            </div>
          </template>
        </a-tree>
      </div>
      <div class="right">
        <!-- 顶部 -->
        <div class="top flexAround">
          <div class="top_content">
            <div class="top_content_title">在场人数</div>
            <div class="top_content_content">24</div>
          </div>
          <div class="top_content">
            <div class="top_content_title">累计人数</div>
            <div class="top_content_content">45</div>
          </div>
          <div class="top_content">
            <div class="top_content_title" style="position:relative">
              班组负责人
              <span
                style="color:#1890ff;margin-left:10px;position:absolute;left:60%;cursor: pointer;"
                @click="clickSet"
              >设置</span>
            </div>
            <div class="top_content_content">26</div>
          </div>
        </div>

        <!-- 中间内容 -->
        <div class="content">
          <div class="center flexBetween">
            <div class="center_title">人员列表</div>
            <div>
              <a-radio-group v-model="radioModel" @change="onChange">
                <a-radio-button value="all">全部</a-radio-button>
                <a-radio-button value="present">在场</a-radio-button>
                <a-radio-button value="exit">离场</a-radio-button>
              </a-radio-group>
              <a-input-search
                placeholder="请输入姓名查询"
                style="width: 200px;margin-left:20px"
                @search="onSearch"
              />
            </div>
          </div>
          <!-- 表格 -->
          <div class="atable">
            <a-table :columns="columns" :data-source="data">
              <span slot="action" slot-scope="text, record">
                <a style="color:#1890FF" @click="onEdit(text, record)">详情</a>
              </span>
            </a-table>
          </div>

          <!-- 分页 -->
          <div class="pagination flexBetween">
            <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
            <div>
              <a-pagination
                :current="current"
                :page-size-options="pageSizeOptions"
                :total="total"
                show-size-changer
                :pinspector-size="pageSize"
                @showSizeChange="onShowSizeChange"
                @change="pageChange"
                show-quick-jumper
              >
                <template slot="buildOptionText" slot-scope="props">
                  <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
                  <span v-if="props.value === '40'">全部</span>
                </template>
              </a-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <div>
      <a-modal
        v-model="visible"
        title="设置班组负责人"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          v-if="visible"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="charge" label="班组负责人" prop="charge">
            <a-select
              mode="multiple"
              :size="size"
              placeholder="请选择"
              :default-value="['张三', '李四']"
              style="width: 300px"
              @change="handleChange"
              @popupScroll="popupScroll"
            >
              <a-select-option v-for="(item,index) in charge" :key="index">{{ item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: '人员编码', dataIndex: 'name', key: 'name' },
  { title: '姓名', dataIndex: 'proName', key: 'proName' },
  { title: '岗位', dataIndex: 'proCode', key: 'proCode', align: 'center' },
  { title: '施工班组', dataIndex: 'proId', key: 'proId', align: 'center' },
  { title: '进场时间', dataIndex: 'entryTime', key: 'entryTime', align: 'center' },
  { title: '离场时间', dataIndex: 'leavTime', key: 'leavTime', align: 'center' },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '2',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '3',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '4',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  },
  {
    key: '5',
    name: '010212131',
    proName: '张三',
    proCode: '钢筋工',
    proId: '下构一队',
    entryTime: '2020-02-12',
    leavTime: '2020-02-12'
  }
]
const treeData = [
  {
    title: '江苏国骄建设有限公司',
    key: '0-0',
    scopedSlots: {
      title: 'custom'
    },
    disabled: true,
    children: [
      {
        title: '结构队',
        key: '0-0-0',
        scopedSlots: {
          title: 'custom'
        }
      },
      {
        title: '大临工程',
        key: '0-0-1',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  },
  {
    title: '江苏路通建筑劳务有限公司',
    key: '0-1',
    disabled: true,
    scopedSlots: {
      title: 'custom'
    },
    children: [
      {
        title: '文明施工班组',
        key: '0-1-0',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  },
  {
    title: '江苏路通建筑劳务有限公司',
    key: '0-2',
    disabled: true,
    scopedSlots: {
      title: 'custom'
    },
    children: [
      {
        title: '文明施工班组',
        key: '0-2-0',
        scopedSlots: {
          title: 'custom'
        }
      }
    ]
  }
]
export default {
  data() {
    return {
      radioModel: 'all',
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      columns,
      data: tabdata,
      treeData,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      visible: false,
      form: {
        charge: []
      },
      size: 'default',
      charge: [
        { key: 'a1', name: '张三' },
        { key: 'a2', name: '李四' },
        { key: 'a3', name: '王二' },
        { key: 'a4', name: '孙五' }
      ],
      selectKey:''
    }
  },
  methods: {
    onChange(e) {
      console.log(e.target.value)
    },
    onSearch(value) {
      console.log(value)
    },
    onEdit(text) {
      //   console.log(text)
      // this.$router.push({ path: '/realNameManage/laborPerson' })
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    },
    clickSet() {
      this.visible = true
    },
    handleOk() {
      this.visible = false
    },
    handleChange(value) {
      // console.log(`Selected: ${value}`);
    },
    popupScroll() {
      // console.log('popupScroll');
    },
    onSelect(selectedKeys, info) {
      this.selectKey=selectedKeys
      console.log('selected', selectedKeys, info)
    }
  }
}
</script>

<style scoped>
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding:40px 0px;
}
.center {
  margin-bottom: 20px;
}
.content {
  background: #fff;
  /* padding: 15px 30px; */
  margin-bottom: 15px;
  width: 100%;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ededed;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
.atable {
  margin-bottom: 20px;
}
.left {
  width: 20%;
  /* margin-right: 10px; */
  background: #fff;
  height: 100vh;
  padding: 20px 0 0 20px;
}
.right {
  width: calc(80% - 1px);
  min-height: 600px;
  background: #fff;
  padding: 15px 30px;
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  color: black;
}
.treeView{
  /* width: 100%; */
  /* background: red; */
  /* color: #fff; */
}
::v-deep .ant-tree li .ant-tree-node-content-wrapper{
  width: 200px;
}
::v-deep li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span{
  color: #000;
  cursor: pointer;
}
</style>